<!DOCTYPE html>

<html class="no-js">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="../../../lib/cdns/axios.min.js"></script>
    <script src="../../../lib/cdns/vue.min.js"></script>
    <link rel="stylesheet" href="../../../lib/cdns/2.14.1/theme-chalk/index.css" />
    <script src="../../../lib/cdns/2.14.1/index.js"></script>
    <link rel="stylesheet" href="../../../lib/cdns/animate.css" />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/cvue.js"></script>

</head>

<body>
    <div id="app">

        <cvue-carousel :option="option" :data="data" @change="change">
            <template slot-scope="{row}">
                <div style="background-color: antiquewhite;height: 100%;">
                    {{row.title}}
                </div>
            </template>
        </cvue-carousel>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                option: {
                    trigger: 'click',
                    arrow: 'always',
                    type: '',
                    index: 1,
                    loop: true,
                    fullscreen: false,
                    position: 'outside',
                    direction: 'horizontal',
                    autoplay: true,
                    interval: 8000,
                },
                data: [
                    { title: 'aaa', srcs: ['https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00643-1721.jpg', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18%2F8%2F125b6560a6ag214.jpg&refer=http%3A%2F%2F1812.img.pp.sohu.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625998208&t=d40420740abe7435783595fc66fdacd1', 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg'] },
                    { title: 'bbb', srcs: ['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3934278620,3850990866&fm=26&gp=0.jpg'] },
                    { title: 'ccc', slot: true, srcs: ['https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=734432655,165045446&fm=26&gp=0.jpg'] }
                ]
            }
        },
        methods: {
            change(e) {
                // console.log(e);
            },
            itemClick(e) {
                console.log(e);
            }
        }
    })
</script>

</html>
<style>
    html,
    body,
    #app {
        width: 90%;
        height: 100%;
    }
</style>